<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数字地图--优客工厂</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../eleTree/eleTree.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>

<body class="childrenBody">
<form class="layui-form" style="width:95%; margin: 0 auto;">
    <div class="layui-form-item">
        <label class="layui-form-label">选择广告：</label>
        <div class="layui-input-block">
            <select name="advertising" lay-filter="advertising" id="advertising" lay-verify="required">
                <option value="">请选择广告</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-row userAddress">
        <label class="layui-form-label">位置：</label>
        <div class="layui-input-inline">
            <select name="province" lay-filter="province" class="province" id="province">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="city" lay-filter="city" id="city">
                <option value="">请选择市</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="area" lay-filter="area" id="area">
                <option value="">请选择县/区</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">网点：</label>
        <div class="layui-input-inline">
            <select name="point" lay-filter="point" id="point">
                <option value="">网点</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">时间段：</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input dateTime" lay-filter="dateTime" lay-verify="required"
                   placeholder="请选择时间段">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优先级：</label>
        <div class="layui-input-inline">
            <select name="priority" lay-filter="priority" id="priority">
                <option value="5">5</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="2">2</option>
                <option value="1">1</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="add-btn">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>

    layui.config({
        base: "../../js/"
    }).extend({
        "address": "address"
    }).use(['jquery', 'table', 'address', 'laydate', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var address = layui.address;
        var laydate = layui.laydate;
        var form = layui.form;

        var level = $.cookie("level");
        if (level.length === 0) {
            address.provinces();
        } else if (level.length === 2) {
            address.init1(level.slice(0, 2));
            $("#province").attr("disabled","disabled");
        } else if (level.length === 4) {
            address.init2(level.slice(0, 2), level.slice(0, 4));
            $("#province").attr("disabled", "disabled");
            $("#city").attr("disabled", "disabled");
        } else if (level.length === 6) {
            address.init3(level.slice(0, 2), level.slice(0, 4), level);
            $("#province").attr("disabled", "");
            $("#city").attr("disabled", "");
            $("#area").attr("disabled", "");
            loadPoint(level);
        }
        form.render();

        //根据地区加载网点
        form.on('select(area)', function (data) {
            loadPoint(data.value);
        });

        function loadPoint(data) {
            $("#point").removeAttr("disabled");
            var buildEl = $("#point");
            buildEl.empty();
            buildEl.append($("<option value=''>请选择网点</option>"));
            form.render('select');
            if (data === "") {
                $("#point").attr("disabled", true);
                buildEl.attr("disabled", "");
                form.render('select');
            } else {
                $.ajax({
                    url: $.cookie("tempUrl") + "maps/selectListBySearch?areaId=" + data + "&name=&pageNum=1&pageSize=999",
                    type: "GET",
                    headers: {
                        "X-Access-Auth-Token": $.cookie("token")
                    },
                    contentType: "application/json;charset=utf-8",
                    success: function (d) {
                        var builds = d.content;
                        if (builds) {
                            $.each(builds, function (index, item) {
                                buildEl.append($("<option value=" + item.id + ">" + item.name + "</option>"))
                            });
                            buildEl.removeAttr("disabled");
                            form.render('select'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
                        }
                    },
                    error: function () {
                        console.log("请求ERROR");
                    }
                })
            }
        }

        // 渲染所有广告
        $.ajax({
            url: $.cookie("tempUrl") + "Ad/selectList?token=" + $.cookie("token") + "&pageNum=1&pageSize=999",
            type: "GET",
            success: function (result) {
                $.each(result.content, function (index, item) {
                    $("#advertising").append($('<option value=' + item.id + '>' + item.name + '</option>'));
                });
                form.render('select');
            }
        });


        form.on("submit(add-btn)", function (data) {
            var dateTime = $(".dateTime").val().split("~");
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                url: $.cookie("tempUrl") + "AdDelivery/insertSelective?token=" + $.cookie("token"),
                type: "POST",
                datatype: "application/json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({
                    "adId": data.field.advertising,
                    "addressId": data.field.area? data.field.point : "",
                    "areaId": data.field.area? data.field.area : (data.field.city? data.field.city : data.field.province),
                    "beginTime": dateTime[0].trim(),
                    "endTime": dateTime[1].trim(),
                    "priority": data.field.priority
                }),
                success: function (result) {
                    if (result.httpStatus == 200) {
                        top.layer.close(index);
                        top.layer.msg("广告投放成功！");
                        layer.closeAll("iframe");
                        //刷新父页面
                        parent.location.reload();
                    } else {
                        layer.alert(result.exception, {icon: 7, anim: 6});
                    }
                }
            });
            return false;
        });


        //日期时间控件
        laydate.render({
            elem: '.dateTime',
            type: 'datetime',
            range: '~',    // 开启时间段选择
            calendar: true,    // 公立节日
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            position: 'fixed',
            min: 0,
            max: 4073558400000,
            done: function (value, date) {
            }
        });
    })
    ;
</script>
</body>
</html>